<template>
  <CustomNav title="时光锦汉服体验店"></CustomNav>
  <view class="container" v-if="appointmentStore.appointmentOrder.length">
    <view class="allOrder">
      <view>全部订单</view>
      <view>陕西工院店/大唐不夜城点</view>
    </view>

    <view class="orderContent">
      <view
        class="order"
        v-for="(item, index) in appointmentStore.appointmentOrder"
        :key="index"
      >
        <view class="orderTime">下单时间：{{ day }}</view>
        <view class="info">
          <view class="left">
            <u-image
              :show-loading="true"
              src="https://cdn.uviewui.com/uview/album/1.jpg"
              width="160rpx"
              height="160rpx"
            ></u-image>
            <view class="basicInfo">
              <view class="top">
                <view class="name">
                  <view>套餐名称+装造+摄影</view>
                  <view>￥169.0</view>
                </view>
                <view class="count">X1</view>
              </view>
              <view class="quantity">{{ item.personNumber }}人</view>
            </view>
          </view>
        </view>
        <view class="btn">
          <view class="viewOrder" @click="viewOrder">查看订单</view>
          <view class="recur" @click="handleRecur">再次预约</view>
        </view>
      </view>
    </view>
  </view>
  <van-empty description="暂无订单" v-else />
</template>

<script setup>
import CustomNav from "@/components/CustomNav/index.vue";
import useAppointmentStore from "@/store/modules/appointment";
import { getOrderInfoVo } from "@/api/user";
import { getItem } from "@/utils/localStorage";

const appointmentStore = useAppointmentStore();

console.log("appointmentStore：", appointmentStore);

// 查看订单
const viewOrder = () => {
  uni.navigateTo({
    url: "/pagesA/viewOrder/index",
  });
};

// 再次预约
const handleRecur = () => {
  uni.navigateTo({
    url: "/pagesA/appointment/index",
  });
};

// 今日
const day = computed(() => {
  return (
    new Date().getFullYear() +
    "-" +
    (new Date().getMonth() + 1) +
    "-" +
    new Date().getDate()
  );
});

onMounted(async () => {
  const result = await getOrderInfoVo(getItem("userInfo").id);
  console.log("result:", result);
});
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #efefef;
  min-height: 90vh;
  padding: 0 30rpx;
  padding-bottom: 40rpx;

  .allOrder {
    display: flex;
    justify-content: space-between;
    padding-top: 50rpx;

    view {
      font-size: 28rpx;
      font-weight: 700;
    }
  }

  .orderContent {
    margin-top: 50rpx;

    .order {
      margin-top: 20rpx;

      .orderTime {
        color: #131313;
        font-size: 28rpx;
        margin-bottom: 10rpx;
      }

      .info {
        display: flex;

        .left {
          width: 100%;
          display: flex;
          justify-content: space-between;

          .basicInfo {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            margin-left: 10rpx;

            .top {
              display: flex;
              flex-direction: column;

              .name {
                display: flex;
                flex: 1;
                justify-content: space-between;

                view {
                  font-size: 28rpx;
                }
              }

              .count {
                display: flex;
                justify-content: flex-end;
                font-size: 26rpx;
                margin-top: 10rpx;
              }
            }

            .quantity {
              font-size: 28rpx;
              margin-bottom: 10rpx;
            }
          }
        }
      }

      .btn {
        display: flex;
        justify-content: flex-end;

        view {
          color: #fff;
          font-size: 24rpx;
          border-radius: 20rpx;
          padding: 8rpx 25rpx;
        }

        .viewOrder {
          background-color: #bbbbbb;
        }

        .recur {
          background-color: $btn;
          margin-left: 25rpx;
        }
      }
    }
  }
}
</style>
